import {
  Component,
  ViewEncapsulation,
  ChangeDetectionStrategy,
  OnChanges,
  SimpleChanges,
  Input,
  Inject,
  forwardRef,
  TemplateRef,
} from '@angular/core';
import { TypeUtils } from '../core/utils/type';
import { DateService } from '../core/services/date.service';
import { TimelineComponent } from './timeline.component';

export type lvTimelineItemType = 'normal' | 'info' | 'success' | 'warning' | 'error';

@Component({
  selector: 'lv-timeline-item',
  templateUrl: './timeline-item.component.html',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TimelineItemComponent implements OnChanges {
  @Input() lvDot: TemplateRef<void>;

  @Input() lvType: lvTimelineItemType = 'normal';

  @Input() lvPosition: 'left' | 'right' | 'tiled' = 'left';

  @Input() lvTime: Date | string | number | TemplateRef<void>;

  public time;

  public typeUtils = TypeUtils;

  public timelineMode = this.timeline.lvMode;

  constructor(
    @Inject(forwardRef((): typeof TimelineComponent => TimelineComponent)) public timeline: TimelineComponent,
    public dateService: DateService,
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    const { lvTime } = changes;

    if (lvTime) {
      if (this.typeUtils.isTemplateRef(lvTime.currentValue)) {
        this.time = lvTime.currentValue;
      } else {
        this.time = this.dateService.format(lvTime.currentValue, this.timeline.lvFormat);
      }
    }
  }
}
